<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '详细信息',
                icon: 'clarity:info-standard-line',
                onClick: handleGroupInfo.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <GroupDesc @register="registerModal" />
  </div>
</template>
<script lang="ts" setup>
  import { defaultActionColumn, defaultTableSettings } from "/@/hooks/core/useDefault";
  import { BasicTable, TableAction, useTable } from "/@/components/Table";
  import { getReplyListApi } from "/@/api/core/group";
  import { useModal } from "/@/components/Modal";
  import { basicColumns } from "/@/views/student/group/list/data";
  import GroupDesc from "./Desc.vue";

  const [registerTable] = useTable({
    rowKey: "groupId",
    title: "已加入小组",
    api: getReplyListApi,
    columns: basicColumns,
    actionColumn: {
      width: 120,
      ...defaultActionColumn,
    },
    ...defaultTableSettings,
  });

  const [registerModal, { openModal }] = useModal();

  async function handleGroupInfo(record) {
    openModal(true, record);
  }
</script>
